<template>
  <div class="cinima">
    <div class="box">
      <carousel-3d v-if="movieScheduleInfo.length" width="250" @after-slide-change="handelSlideChange">
        <slide
          v-for="(item, index) in movieScheduleInfo"
          :key="index"
          :index="index"
        >
          <van-image
            @click="handleClick(item)"
            width="100%"
            height="100%"
            :src="'http://localhost:3333' + item[0].poster"
          />
        </slide>
      </carousel-3d>
    </div>

    <div>

    </div>

    <van-tabs v-model="active">
      <van-tab
        v-for="schedule in currentMovieScheduleInfo"
        :key="schedule.schedule_id"
        :title="schedule.show_date"
      >
      {{schedule.show_time}}
      {{schedule.show_time | filterTime(schedule.show_date, schedule.movie_long)}} 散场
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCurrentMovieSchedule } from '@/api/movie'
import { Carousel3d, Slide } from 'vue-carousel-3d'
import dayjs from 'dayjs'
export default {
  components: {
    Carousel3d,
    Slide
  },
  data () {
    return {
      active: 0,
      movieScheduleInfo: [],
      currentMovieScheduleInfo: []
    }
  },
  async created () {
    const res = await getCurrentMovieSchedule()
    console.log(res)
    this.movieScheduleInfo = res.data.data.movieScheduleInfo
    this.currentMovieScheduleInfo = res.data.data.movieScheduleInfo[0]
  },
  methods: {
    handleClick (current) {
      this.currentMovieScheduleInfo = current
    },
    handelSlideChange (index) {
      this.currentMovieScheduleInfo = this.movieScheduleInfo[index]
    }
  },
  filters: {
    filterTime (time, date, long) {
      const newTime = dayjs(date + ' ' + time)
      return dayjs(newTime).add(long.slice(0, -2), 'minute').format('HH:mm')
    }
  }

}
</script>

<style>
.box {
  background-color: #22223e;
  padding: 10px 0;
}
</style>
